<template>
    <div class='merchantDetails'>
        <div class='content'>
            <el-breadcrumb class='topBox' separator-class="el-icon-arrow-right">
                <!-- <el-breadcrumb-item :to="{ path:isAdmin?'/memberUser/merchant':'/roleMannagerPage/merchantIndex' }">平台注册商户</el-breadcrumb-item> -->
                <el-breadcrumb-item>账号管理</el-breadcrumb-item>
                <el-breadcrumb-item>{{name}}</el-breadcrumb-item>
            </el-breadcrumb>

            <el-tabs class='tabsBox' v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="基本信息" name="基本信息">
                    <information ref="information" :informationData='informationData'></information>
                </el-tab-pane>
                <el-tab-pane label="标签管理" name="标签管理">
                    <eleList ref='eleList'></eleList>
                </el-tab-pane>
                <el-tab-pane label="内容管理" name="内容管理">
                    <manageContent ref='manageContent'></manageContent>
                </el-tab-pane>
                <el-tab-pane label="公司介绍" name="公司介绍">
                    <companyInfo ref='companyInfo'></companyInfo>
                </el-tab-pane>
                <el-tab-pane label="产品介绍" name="产品介绍">
                    <product ref='product'></product>
                </el-tab-pane>
                 <el-tab-pane label="晋升制度" name="晋升制度">
                    <companyRule ref='companyRule'></companyRule>
                </el-tab-pane>
                <!-- <el-tab-pane label="成员管理" name="成员管理">
                    <concup ref='mermber'></concup>
                </el-tab-pane> -->
            </el-tabs>
        </div>
    </div>
</template>


<script>
import { detail } from '@/api/user.js';
import eleList from '@/views/manageTeam/eleList';
import manageContent from '@/views/manageTeam/manageContent';
import information from '@/views/admin/information';
import companyInfo from '@/views/company/companyInfo';
import product from '@/views/company/product';
import companyRule from '@/views/company/companyRule';

export default {
    data(){
        return {
          flag:true,
            activeName:'基本信息',
            params:{
                targetId:''
            },
            informationData:{},
            name:'',
          isAdmin:localStorage.getItem('systemRole')=='admin'

        }
    },
    methods:{
        //账号详情
        getDetails(){
          this.params.targetId = this.$route.query.managerId;
          detail(this.params).then((json) => {
                if(json.status === 200){
                    //基本信息
                    this.informationData = json.data;
                }
            });
        },
        handleClick(){
            switch (this.activeName) {
                case '基本信息':
                    this.getDetails();
                    break;
                case '标签管理':
                    // this.$refs.eleList.openList();
                    break;
                case '内容管理':
                    // this.$refs.manageContent.openList();
                    break;
                case '公司介绍':
                    // this.$refs.manageContent.openList();
                    break;
                case '产品介绍':
                    // this.$refs.manageContent.openList();
                    break;
                case '晋升制度':
                    // this.$refs.manageContent.openList();
                    break;
                default:
                    break;
            }
            sessionStorage.setItem('activeName',this.activeName);
        }
    },
    mounted(){
        // localStorage.setItem('oldPath',window.location.href.split('/#')[1]);
        this.getDetails();
        if(sessionStorage.activeName){
            this.activeName = sessionStorage.activeName;
        }
    },
    components:{
        information,
        eleList,
        manageContent,
        companyInfo,
        product,
        companyRule
    }

}
</script>


<style lang="scss" scoped>
.merchantDetails{
     margin-top: 32px;
    .content{
        width: 90%;
        margin: 0 auto;
        .topBox{
            color: rgba(16, 16, 16, 1);
            font-size: 24px;
            margin-bottom: 50px;
        }

        .form{
            background: #fff;
            padding: 40px;

            h3{
                color: rgba(45, 45, 45, 1);
                font-size: 20px;
                font-weight: 400;
                display: flex;
                align-items: center;
                margin-bottom: 43px;
                i{
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                    background: #be1a21;
                    margin-right: 11px;
                    border-radius: 50px;
                }
            }
            p{
                color: rgba(172, 172, 172, 1);
                font-size: 15px;
                text-align: left;
            }

            .upLoad{
                width: 82px;
                height: 82px;
                img{
                    width: 100%;
                    height: 100%;
                }
                .iconfont{

                    font-size: 5rem;
                }
                .icon-tianjia1:before{
                    margin-top: 2rem;
                    display: inline-block;
                }
            }
        }

        .btnBox{
            width: 100%;
            border-top: 1px solid rgba(213, 212, 212, 1);
            margin: 96px 0 32px 0;
            padding-top:66px;
            text-align: center;
            p{
                font-size: 14px;
                color: rgba(85, 84, 84, 1);
                margin-top: 24px;
                text-align: center;
            }
        }
    }
}
</style>